<template>
  <!-- 报表用户表单弹窗 -->
  <el-dialog
    v-model="visibleDialog"
    :title="props.title"
    width="600px"
    draggable
    align-center
    @close="closeDialog"
  >
    <el-form
      ref="formRef"
      :model="formData"
      :rules="rules"
      label-width="90px"
      style="width: 97%"
    >
      <el-form-item label="用户姓名" prop="reportUserName">
        <SelectPerson
          :maxCollapseTags="1"
          :isMultiple="false"
          :width="`100%`"
          :showSelectPerson="selectPersonData"
          @get-person="getPerson"
        />
      </el-form-item>
      <el-form-item label="员工号" prop="reportUserNo">
        <el-input
          v-if="!props.isReadonly"
          v-model="formData.reportUserNo"
          placeholder="请输入员工号"
          clearable
          disabled
        />

        <span v-else>{{ formData.reportUserNo }}</span>
      </el-form-item>

      <el-form-item label="权限类型" prop="powerType">
        <el-radio-group v-model="formData.powerType">
          <el-radio
            v-for="item in reportTypeList"
            :label="item.value"
            :key="item.value"
            :disabled="props.isReadonly"
            border
          >
            {{ item.label }}
          </el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="备注" prop="remarks">
        <el-input
          v-if="!props.isReadonly"
          v-model="formData.remarks"
          placeholder="请输入备注"
          type="textarea"
          show-word-limit
          :maxlength="255"
          :autosize="{ minRows: 3, maxRows: 4 }"
          clearable
        />

        <span v-else>{{ formData.remarks }}</span>
      </el-form-item>
    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button
          v-if="!props.isReadonly"
          type="primary"
          :loading="loading"
          @click="handleSubmit"
          >确 定</el-button
        >
        <el-button @click="closeDialog">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import request from "@/utils/request";
import { useDictStoreHook } from "@/store/modules/dictionary"; // 引入
const dictionaryStore = useDictStoreHook();
const reportTypeList = dictionaryStore.filterDictList("REPORTTYPE");

defineOptions({
  name: "DMPREPORTUSERADDORUPDATE",
  inheritAttrs: false,
});

const emit = defineEmits(["reset-table", "change-visible"]);

const props = defineProps({
  visible: {
    type: Boolean,
    default: () => {
      return false;
    },
  },
  title: {
    type: String,
    default: () => {
      return "";
    },
  },
  data: {
    type: Object,
    default: () => {
      return {};
    },
  },
  isReadonly: {
    type: Boolean,
    default: () => {
      return false;
    },
  },
});

const visibleDialog = ref(false);
const selectPersonData: any = ref([]);
watch(
  () => props.visible,
  (newVal: boolean) => {
    selectPersonData.value = [];
    visibleDialog.value = newVal;
  }
);

const rules = reactive({
  reportUserNo: [
    {
      message: "请输入员工号",
      trigger: "blur",
      required: true,
    },
    {
      min: 1,
      max: 20,
      message: "长度在 1 到 20 个字符",
      trigger: "blur",
      required: true,
    },
  ],
  reportUserName: [
    {
      message: "请输入员工名称",
      trigger: "blur",
      required: true,
    },
    {
      min: 1,
      max: 45,
      message: "长度在 1 到 45 个字符",
      trigger: "blur",
      required: true,
    },
  ],
  powerType: [
    {
      min: 1,
      max: 20,
      message: "请选择权限类型",
      trigger: "change",
      required: true,
    },
  ],
  remarks: [
    {
      min: 1,
      max: 255,
      message: "长度在 1 到 255 个字符",
      trigger: "blur",
    },
  ],
});

const formRef = ref(ElForm);

let formData = reactive({
  id: "",
  reportUserNo: "",
  reportUserId: "",
  reportUserName: "",
  powerType: "1",
  remarks: "",
});

watch(
  () => props.data,
  (newVal: any) => {
    formData.id = "";
    if (newVal?.id) {
      const {
        id,
        reportUserNo,
        reportUserId,
        reportUserName,
        powerType,
        remarks,
      } = newVal;
      Object.assign(formData, {
        id,
        reportUserNo,
        reportUserId,
        reportUserName,
        powerType,
        remarks,
      });

      selectPersonData.value = [
        {
          id: id,
          firstName: reportUserName,
        },
      ];
    }
  }
);

/** 关闭表单弹窗 */
function closeDialog() {
  visibleDialog.value = false;
  emit("change-visible", false);
  resetForm();
}

/** 重置表单 */
function resetForm() {
  formRef.value.resetFields();
  formRef.value.clearValidate();
  formData.id = "";
  formData.reportUserNo = "";
  formData.reportUserId = "";
  formData.reportUserName = "";
  formData.powerType = "1";
  formData.remarks = "";
}

const loading = ref(false);

/** 报表用户保存提交 */
function handleSubmit() {
  formRef.value.validate(async (valid: any) => {
    if (valid) {
      loading.value = true;
      const text = formData.id ? "编辑" : "新增";
      await request({
        url: "/dmpAdmin/dmpreportuser/save",
        method: "post",
        data: formData,
      }).finally(() => {
        loading.value = false;
      });
      ElMessage.success(text + `成功`);
      closeDialog();
      emit("reset-table", formData.id);
    }
  });
}

// 组件销毁时调用
onBeforeUnmount(() => {
  visibleDialog.value = false;
  emit("change-visible", false);
});

/** new 打开人员选择器方法   start **/
function getPerson(Ids: string[], Objects: any) {
  formData.reportUserNo = Objects[0]?.empNo || "";
  formData.reportUserId = Objects[0]?.id || "";
  formData.reportUserName = Objects[0]?.firstName || "";
}
/** new 打开人员选择器方法   start **/
</script>

<style lang="scss" scoped>
:deep(.el-radio.is-bordered) {
  background-color: var(--el-color-info-light-9);
  border: none !important;
  color: var(--el-color-info);
  font-weight: 700;
  margin-right: 15px;
  .el-radio__inner {
    display: none;
  }
}
:deep(.el-radio.is-bordered.is-checked) {
  background-color: var(--el-color-primary-light-8) !important;
  color: var(--el-color-primary) !important;
  border: none !important;
  font-weight: 700 !important;
  .el-radio__input.is-checked .el-radio__inner {
    display: none;
  }
}
</style>
